import { Component, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';

export interface ColumnConfig {
  key: string;
  title: string;
  visible: boolean;
}

@Component({
  selector: 'app-column-config-dialog',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    MatDialogModule,
    MatCheckboxModule,
    MatButtonModule
  ],
  template: `
    <h2 mat-dialog-title>列显示配置</h2>
    <mat-dialog-content>
      <div *ngFor="let column of columns" class="column-option">
        <mat-checkbox [(ngModel)]="column.visible">
          {{ column.title }}
        </mat-checkbox>
      </div>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button mat-button (click)="onCancel()">取消</button>
      <button mat-raised-button color="primary" (click)="onSave()">保存</button>
    </mat-dialog-actions>
  `,
  styles: [`
    .column-option {
      margin: 8px 0;
    }
    mat-dialog-content {
      min-width: 300px;
      max-height: 400px;
    }
  `]
})
export class ColumnConfigDialogComponent {
  columns: ColumnConfig[];

  constructor(
    public dialogRef: MatDialogRef<ColumnConfigDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { columns: ColumnConfig[] }
  ) {
    this.columns = [...data.columns];
  }

  onCancel(): void {
    this.dialogRef.close();
  }

  onSave(): void {
    this.dialogRef.close(this.columns);
  }
}